<template>
    <div>
        <el-table :data="persons">
            <el-table-column prop="id"  label="id" width="180px"></el-table-column>
            <el-table-column prop="name"  label="名字" width="180px"></el-table-column>
            <el-table-column   label="年龄" width="180px">
                <template slot-scope="scope">
                    {{scope.row.age}}周岁
                </template>
            </el-table-column>
            <el-table-column   label="性别" width="180px">
                <template slot-scope="scope">

                    {{ scope.row.gender=='m'? '女':'男'}}
                </template>
            </el-table-column>
            <el-table-column   label="是否已婚" width="180px">
                <template slot-scope="scope">
                    {{ scope.row.married? '已婚':'未婚' }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">      
                    <el-button type="warning" size="mini">修改</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                persons:[
                    {id:1001,name:'小雨',age:18,gender:"f",married:false},
                    {id:1001,name:'量量',age:28,gender:"m",married:true},
                    {id:1001,name:'小星',age:38,gender:"f",married:true},
                    {id:1001,name:'化合',age:48,gender:"m",married:true},
                    {id:1001,name:'豆豆',age:58,gender:"f",married:true},
                ],
            }
        },
        methods: {
            del(index,row) {
                console.log('即将删除下标:',index);
                console.log(row)
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(() => {
                            this.persons.splice(index,1) //删除选中数据
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                    });
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>